<template>
	<div class="chatview">
		<div ref="_echarts" class="echarts"></div>
	</div>
</template>

<script setup>
    import { reactive, getCurrentInstance, watch } from 'vue'
    import * as echarts from 'echarts/core';
    import { TooltipComponent, LegendComponent } from 'echarts/components';
    import { PieChart } from 'echarts/charts';
    import { LabelLayout } from 'echarts/features';
    import { CanvasRenderer } from 'echarts/renderers';
    echarts.use([
        TooltipComponent,
        LegendComponent,
        PieChart,
        CanvasRenderer,
        LabelLayout
    ]);
    let { proxy } = getCurrentInstance()
	
	const props = defineProps({
		data: { type: Object, require: true },
		top: { type: Number, default: 0 },
		left: { type: Number, default: 0 },
		right: { type: Number, default: 0 },
		bottom: { type: Number, default: 0 },
	})

	let obj = reactive({
		option: {
            tooltip: {
                trigger: 'item'
            },
            legend: {
                top: '2%',
                left: 'center'
            },
			grid: {
				top: props.top+'%',
				left: props.left+'%',
				right: props.right+'%',
				bottom: props.bottom+'%',
				containLabel: true
			},
            series: [
                {
                    name: '用户分类',
                    type: 'pie',
                    radius: ['25%', '50%'],
                    top: '10%',
                    itemStyle: {
                        borderRadius: 10,
                        borderColor: '#f4f4f4',
                        borderWidth: 5
                    },
                    label: {
                        formatter: '{name|{b}}\n{value|{c}人}',
                        minMargin: 0,
                        edgeDistance: 0,
                        lineHeight: 15,
                        rich: {
                            value: {
                                fontSize: 10,
                                color: '#999'
                            }
                        }
                    },
                    data: []
                }
            ]
		}
	})

	watch(
		() => [props.data],
		(a, b) => {
			obj.option.series[0].data = props.data
			const tmp = echarts.init(proxy.$refs["_echarts"]);
			tmp.setOption(obj.option);
		}
	)
</script>

<style scoped lang="scss">
    @import "@/assets/echats.scss";
</style>